<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/home.css" />
		<link rel="stylesheet" type="text/css" href="dist/font-awesome/css/font-awesome.css" />
	</head>

	<body>
		<div class="banner">
			<ul class="banner_box clearfix">
				<li>
					<a href="javascript:;"><img src="img/08394249613.jpg" /></a>
				</li>
				<li>
					<a href="javascript:;"><img src="img/09593671202.jpg" /></a>
				</li>
				<li>
					<a href="javascript:;"><img src="img/12135924519.jpg" /></a>
				</li>
				<li>
					<a href="javascript:;"><img src="img/17244866668.jpg" /></a>
				</li>
			</ul>
			<ol class="clearfix">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
			<nav>
				<div>
					<img src="img/index_logo.png" alt="" />

				</div>
				<div>
					<input type="text" placeholder="输入商场商品名字" />
				</div>
				<div>
					<i class="fa fa-aw fa-bell-o"></i>
					<p>消息</p>
				</div>
			</nav>
		</div>
		<ul class="content">
			<li>
				<img src="images/hufanli_03.png" alt="" />
				<p>商城返利</p>
			</li>
			<li>
				<img src="images/hufanli_05.png" alt="" />
				<p>商城返利</p>
			</li>
			<li>
				<img src="images/hufanli_07.png" alt="" />
				<p>商城返利</p>
			</li>
			<li>
				<img src="images/hufanli_09.png" alt="" />
				<p>商城返利</p>
			</li>
			<li class="posi">
				<img src="images/hufanli_03.png" alt="" />
				<p>商城返利</p>
				<div>薅羊毛</div>
			</li>
			<li class="posi">
				<img src="images/hufanli_17.png" alt="" />
				<p>商城返利</p>
				<div>9折</div>
			</li>
			<li>
				<img src="images/hufanli_03.png" alt="" />
				<p>商城返利</p>
			</li>
			<li>
				<img src="images/hufanli_18.png" alt="" />
				<p>商城返利</p>
			</li>
		</ul>
		<div class="mian">
			<div>
				<img src="images/hufanli_24.png" alt="" />
			</div>
			<div>
				<img src="images/hufanli_26.png" alt="" />
			</div>
			<div>
				<img src="images/hufanli_28.png" alt="" />
			</div>
		</div>
		<div class="mian1">
			<div>
				<img src="images/hufanli_33.png" alt="" />
			</div>
			<div>
				<img src="images/hufanli_35.png" alt="" />
			</div>
		</div>
		<div class="mian">
			<div>
				<img src="images/一起惠返利网_43.png" alt="" />
				<p>签到得汇币</p>
			</div>
			<div>
				<img src="images/hufanli_42.png" alt="" />
				<p>签到得汇币</p>
				
			</div>
			<div>
				<img src="images/一起惠返利网_43-44.png" alt="" />
				<p>签到得汇币</p>
				
			</div>
		</div>
		<div class="mian_foot">
			<div class="mian_l">
				<img src="images/hufanli_49.png" alt="" />
			</div>
			<ul>
				<li>
					<div>
						<img src="images/hufanli_51.png" alt="" />
					</div>
					<div>
						<p>白菜汇</p>
						<span>9.9元白菜报价汇总</span>
					</div>
				</li>
				<li>
					<div>
						<img src="images/hufanli_54.png" alt="" />
					</div>
					<div>
						<p>优质爆料</p>
						<span>9.9元白菜报价汇总</span>
					</div>
				</li>
				<li>
					<div>
						<img src="images/hufanli_56.png" alt="" />
					</div>
					<div>
						<p>秒杀抢购</p>
						<span>9.9元白菜报价汇总</span>
					</div>
				</li>
			</ul>
		</div>
		<div class="con_header">
				<div>
					<i></i>
					<span>今日值得买</span>
				</div>
				<p>。。。</p>
			</div>
		<ul class="container">
		</ul>
		<footer>
			<ul>
				<li>
					<i class="fa fa-aw fa-home"></i>
					<p>首页</p>
				</li>
				<li>
					<i class="fa fa-aw fa-envelope"></i>
					<p>商城返利</p>
				</li>
				<li>
					<i class="fa fa-aw fa-gear"></i>
					<p>优惠爆料</p>
				</li>
				<li>
					<i class="fa fa-aw fa-eject"></i>
					<p>超级返利</p>
				</li>
				<li>
					<i class="fa fa-aw fa-user"></i>
					<p>我的</p>
				</li>
			</ul>
		</footer>
	</body>
	<script src="dist/js/jquery.3.1.1.js"></script>
	<script src="dist/js/自适应.js"></script>
	<script>
	//导航加色
	var startPos = $("nav").offset().top;
	console.log(startPos)
		$.event.add(window, "scroll", function() {
			
			var scro = $(window).scrollTop();
			console.log($(window).scrollTop())
			if(scro > startPos) {
				$("nav").css({
					background: "orangered"
				})
			} else {
				$("nav").css({
					background: "none"
				})

			}
		})
		//轮播
		var index = 0,
			le = $('.banner>ul>li').length,
			oUl = $('.banner ul'),
			aLi = $('ol li');
			
		var timer = setInterval(function() {
			go();
		}, 2000);

		function go() {
			if(index >= le - 1) {
				index = 0;
				var max = '-' + 100 * index + '%';
				oUl.css('margin-left', max);
			}
			index++;
			anime(index);
		}

		function anime(index) {
			var max = '-' + 100 * index + '%';
			oUl.animate({
				"marginLeft": max
			}, 500);
			aLi.eq(index).addClass('on').siblings().removeClass('on');
			if(index == le - 1) {
				aLi.eq(0).addClass('on').siblings().removeClass('on');
			}
		}
		
		//请求数据
		$.ajax({
			type:"get",
			url:"data/home.json",
			async:true,
			success:function(res){
				console.log(res)
				var obj = res.data
				var str=""
				for(var i=0;i<obj.length;i++){
					str += "<li><div class='left'><img src="+obj[i].img+" /></div><div class='right'><h3>"+obj[i].title+"</h3><span>"+obj[i].title1+"</span><p><span>"+obj[i].span+"</span><span>"+obj[i].span1+"</span></p></div></li>"
					
				}
				$(".container").html(str)
			}
		});
	</script>

</html>